<template>
  <div class="register child-box">
    <div class="item-box">
      <h3 class="title-wid">注册登记信息</h3>
      <div class="page-form my-form my-form-register my-form-ele-300">
        <el-form :inline="true" :model="form" ref="form" label-width="140px">
          <el-form-item label="注册登记机构名称" required><!--验证(不能为空)-->
            <el-input v-model="form.registerUnit"></el-input>
          </el-form-item>
          <el-form-item label="注册登记单位编码" required><!--验证(不能为空)-->
            <el-input v-model="form.registerUnitCode"></el-input>
          </el-form-item>
          <el-form-item label="电梯注册码" required>
            <el-input v-model="form.registerCode"></el-input>
          </el-form-item>

          <el-form-item label="地址信息" required>
            <areaSelect v-on:getAreaArr="getAreaArr" ref="defaultCode" v-on:getNowAreaPosition="getArea"
                        :areaText="areaText" :changeOnSelect="true"></areaSelect>
          </el-form-item>

          <el-form-item label="小区名称" required>  <!--验证(不能为空)-->
            <el-input v-model="form.housingEstate"></el-input>
          </el-form-item>
          <el-form-item label="电梯详细地址" required><!--验证(不能为空)-->
            <el-input v-model="form.entrance"></el-input>
          </el-form-item>
          <el-form-item label="电梯检验机构名称">
            <el-input v-model="form.registerCheckUnit"></el-input>
          </el-form-item>
          <el-form-item label="注册登记日期">
            <el-date-picker v-model="form.registerCreateDate" type="date" placeholder="选择日期"
                            value-format='yyyy-MM-dd HH:mm:ss'></el-date-picker>
          </el-form-item>

          <el-form-item label="注册牌照编号">
            <el-input v-model="form.registerLicenceCode"></el-input>
          </el-form-item>

          <!--<el-form-item label="厂车拍照编号">-->
            <!--<el-input v-model="form.madeProductedNo"></el-input>-->
          <!--</el-form-item>-->

          <el-form-item label="注册登记人员">
            <el-input v-model="form.registerUser"></el-input>
          </el-form-item>
          <el-form-item label="操作人员">
            <el-input v-model="form.registerOperationUser"></el-input>
          </el-form-item>
          <el-form-item class="upload-card" label="上传安全检验合格证" required>
            <div>
              <!--<span>上传安全检验合格证</span>-->
              <el-upload
                class="ele-upload-picture btn-add"
                :action="uploadUrl"
                multiple
                :before-upload="beforeUpload"
                :on-success="successUpload"
                :on-error="errorUpload"
                :file-list="fileList"
                :before-remove="beforeRemove"
                list-type="picture">
                <div class="upload-notice">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <p class="upload-notice-success status" v-show="flieUploadStatus===1 && fileList.length >= 1"><img
                    src="/static/img/eleAdd/upload_suc.png" alt="">上传成功</p>
                  <p class="upload-notice-error status" v-show="flieUploadStatus===0"><img
                    src="/static/img/eleAdd/upload_err.png" alt="">{{uploadErrMessage}}</p>
                  <p class=" upload-notice-waiting status" v-show="flieUploadStatus===2"><img
                    src="/static/img/pageBar/search_waiting.png" alt="">文件正在上传中</p>
                </div>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5000kb</div>
              </el-upload>
            </div>

          </el-form-item>

        </el-form>


      </div>
    </div>


    <!--downForm start-->
    <div class="item-box">
      <h3 class="title-wid">设备参数信息</h3>
      <!--form start-->
      <div class="page-form my-form my-form-register my-form-ele-300">
        <el-form :inline="true" :model="form" ref="form" label-width="140px">
          <el-form-item label="电梯名称" required> <!--验证(不能为空)-->
            <el-input v-model="form.argsName"></el-input>
          </el-form-item>
          <el-form-item class="liftType" label="电梯类型" required>
            <el-select v-model="form.argsTypeId" placeholder="请选择使用状态"> <!--验证(不能为空)-->
              <el-option v-for="item in argsTypeIdArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="站数" required>
            <el-input type="number" v-model="form.argsStation"></el-input>
          </el-form-item>
          <el-form-item label="层数" required>
            <el-input type="number" v-model="form.argsFloor"></el-input>
          </el-form-item>
          <el-form-item label="额定速度" required>
            <el-input type="number" v-model="form.argsRatedSpeed"></el-input>
          </el-form-item>

          <el-form-item label="门数">
            <el-input type="number" v-model="form.argsDoor"></el-input>
          </el-form-item>

          <el-form-item label="电梯品牌">
            <el-input v-model="form.argsBrand"></el-input>
          </el-form-item>

          <el-form-item label="电梯设备编号">
            <el-input v-model="form.argsSbNo"></el-input>
          </el-form-item>
          <el-form-item label="载重量(kg)"><!--重量必须为数字-->
            <el-input type="number" v-model.number="form.argsLoadCapacity"
            ></el-input>
          </el-form-item>
          <el-form-item label="电梯型号">
            <el-input v-model="form.argsModel"></el-input>
          </el-form-item>
          <el-form-item label="覆盖网络">
            <el-input v-model="form.argsOverlay"></el-input>
          </el-form-item>
          <el-form-item label="控制方式">
            <el-input v-model="form.argsControllType"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!--form end-->
    </div>
    <!--downForm end-->
  </div>
</template>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/page/eleAdd.scss';
</style>

<script>
  import com from '../../../../js/common'  // axios封装方法引入
  import areaSelect from "../../../../components/areaSelect/areaSelect"
  import {getEleType} from "@/api/getData"
  export default {
    components: {
      areaSelect
    },
    data() {
      return {
        form: {
          // regCoordinates: '',         // 安装坐标   (经度，纬度)  lng ,lat(后台暂定)
          registerUnit: '',              // 注册登录机构名称
          registerUnitCode: '',          // 注册登记机构编码
          registerCheckUnit: '',         // 电梯检验机构名称
          registerCode: '',              // 电梯注册码
          registerCreateDate: '',        //注册登记日期
          registerLicenceCode: '',       // 注册牌照编号
          usingInnerCode: '',            // 单位内部编号
          madeProductedNo: '',           // 厂车拍照编号
          registerUser: '',              // 注册登记人员
          registerOperationUser: '',     // 操作人员
          address: '',                   // 地址信息
          street: '',                  // 地址中街道信息
          community: '',                  // 地址中社区信息
          areaCode: '',                  // 安装区域编码
          safetyCertificate: '',           // 安全校验合格证图片地址

          entrance: '',             // 电梯详细地址
          housingEstate: '',                 // 小区名称
          argsName: '',                  // 电梯名称
          argsStation: '',               // 站数
          argsFloor: '',               // 层数
          argsRatedSpeed: '',               // 额定速度
          argsDoor: '',                // 门数
          argsBrand: '',                 // 电梯品牌
          argsSbNo: '',                  // 设备编号
          argsTypeId: '',                // 电梯类型
          argsLoadCapacity: null,          // 载重量
          argsModel: '',                 // 电梯型号
          argsOverlay: '',               // 覆盖网络
          argsControllType: ''           // 控制方式
        },
        argsTypeIdArr: [],      // 类型数组
        areaText: '',
        // 上传相关
        uploadUrl: `${com.basePath}/oss-web/oss/upload`,
        fileList: [],
        flieUploadStatus: -1,
        uploadErrMessage: ''
      }
    },
    props: ['registerMessage'],
    watch: {
      registerMessage(value) {
        this.$refs.defaultCode.getDefaultCode(value.areaCode)   // 安装(父组件触发子组件验证方法)
        this.form = value
        // 图片的回显
        this.fileList = [{
          url: `${this.form.safetyCertificate}`
        }]
      }
    },
    mounted() {

      this.sendRASMsgToParent()
      this.getTypeData()

    },
    methods: {
      // 文件的移除
      beforeRemove(file, fileList) {
        this.fileList = []
      },
      // 上传相关方法
      // 上传前校验
      beforeUpload(file) {
        const index1 = file.name.lastIndexOf(".");
        const index2 = file.name.length;
        const suffix = file.name.substring(index1 + 1, index2)
        if (suffix !== 'jpg' && suffix !== 'png') {
          this.$message({
            type: 'warning',
            message: `${ file.name }不符合上传格式要求`
          });
          this.flieUploadStatus = 0
          this.uploadErrMessage = `该文件不符合上传格式要求`
          return false
        }
        if (file.size / 1024 >= 5000) {
          this.$message({
            type: 'warning',
            message: `${ file.name }大小应该小于5000kb`
          });
          this.flieUploadStatus = 0
          this.uploadErrMessage = `文件大小应该小于5000kb`
          return false
        }
        this.flieUploadStatus = 2
      },
      // 成功上传
      successUpload(res) {
        this.$message({
          type: 'success',
          message: `文件上传成功`
        })
        this.flieUploadStatus = 1
        this.form.safetyCertificate = `${com.uploadUrl}${res.data}`
        this.fileList = [{
          url: `${this.form.safetyCertificate}`
        }]
      },
      // 上传失败
      errorUpload(err, file, fileList) {
        this.$message({
          type: 'error',
          message: `文件上传失败`
        });

        this.uploadErrMessage = `文件上传失败`
        this.flieUploadStatus = 0
      },
      // 电梯类型接口
      getTypeData() {
        getEleType({}).then((data) => {
          this.argsTypeIdArr = data.data.data
        }).catch((data) => {
          this.$message.error('电梯类型获取异常')
        })
      },
      getAreaArr(res) {
        if (res[3]) {
          this.form.street = res[3].label
        }
        if (res[4]) {
          this.form.community = res[4].label
        }
        this.form.address = res.reduce((pos, value) => {
          return pos + value.label
        }, '')
      },
      getArea(res) {  // 获取地址信息areaCode
        this.form.areaCode = res.code
      },
      sendRASMsgToParent: function () {
        this.$emit("listenToRASChildEvent", this.form)
        // 获取图片地址
        if (this.form.safetyCertificate) {
          this.fileList = [{
            url: `${this.form.safetyCertificate}`
          }]
        }
      }
    }
  }

</script>


